import React from "react";
import { inject, observer } from "mobx-react";
import { renderAlertPage,isEmpty ,renderLoading} from "../../util/Util";
import {  Row, Col , Modal , message } from "antd";
import { WeaTableNew } from "comsMobx";
import { WeaBrowser, WeaSearchGroup,WeaRightMenu } from "ecCom";

const WeaTable = WeaTableNew.WeaTable;
const toJS = mobx.toJS;
@inject("goalBaseStore")
@observer
export default class GoalBasePerson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hrmIds: "",
      ids: "",
      tableSelectedRowKeys: [],
      browserData:[]
    };
  }

  componentWillMount() {
    //一些初始化请求
    this.getPersonBaseSetting(this.props.selectType,this.props.treeId);
  }

  componentWillReceiveProps(nextProps){
    if(this.props.treeId != nextProps.treeId){
      this.getPersonBaseSetting(nextProps.selectType,nextProps.treeId);
    }
  }

  componentDidMount(){
    this.props.onRef(this)
  }

  render() {
    const { treeId, treeName, goalBaseStore } = this.props;
    const { tableSelectedRowKeys} = this.state;
    const { tableStore , loading, hasRight } = goalBaseStore;
    const rightMenu = [// 右键菜单
      {
        key: '0',
        icon: <i className='icon-coms-Custom'/>,
        content : '显示列定制',
        onClick : this.showColumn
      },
      {
        key: '1',
        icon: <i className='icon-coms-Save-as'/>,
        content : '保存',
        onClick : ()=>this.savePersonBaseSetting()
      },
      {
        key: '2',
        icon: <i className="icon-coms-Delete" />,
        content : '批量删除',
        onClick : ()=>this.onDeletePersonBaseSetting()
      },
    ];

    const collectParams = { // 收藏功能配置
      favname: '负责人设置',
      favouritetype: 1,
      objid: 0,
      link: '/spa/workrelate/static/index.html?#/main/workrelate/goal/goalIndex',
      importantlevel: 1,
    };

    //请求数据

    if(loading){
      return renderLoading();
    }

    if (!hasRight) {
      return renderAlertPage("对不起，您暂时没有权限！");
    }



    if (treeId == "" || treeName == "") {
      return renderAlertPage("请点击左侧组织架构进行设置","icon-coms-hrm","30%");
    }
    return (
      <div>
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
        <WeaSearchGroup title={<span style={{ fontWeight: "700" }}>负责人设置:{treeName}</span>} showGroup={true}>
          <Row gutter="1" style={{ width: "600", margin: "5px 10px 0 10px" }}>
            <Col span={4}>人员</Col>
            <Col span={7}>
              <WeaBrowser
                type={17}
                textDecoration={true}
                isSingle={false}
                inputStyle={{ width: 150 }}
                replaceDatas={this.state.browserData}
                onChange={(ids, names, datas) => {
                  this.setState({
                    hrmIds: ids,
                  });
                }}
              />
            </Col>
          </Row>
        </WeaSearchGroup>

        <WeaTable // table内部做了loading加载处理，页面就不需要再加了
          comsWeaTableStore={tableStore} // table store
          hasOrder={true} // 是否启用排序
          needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
          rowSelection={{
            selectedRowKeys:tableSelectedRowKeys,
            onChange: this.onSelectChange
          }}
          onOperatesClick={this.onOperatesClick.bind(this)} //右键菜单操作

        />
        {/* </WeaTop> */}
        </WeaRightMenu>
      </div>
    );
  }

  //获取负责数据
  getPersonBaseSetting(selectType,treeId) {
    let params = {
      type: selectType,
      orgId: treeId
    };
    let { goalBaseStore } = this.props;
    goalBaseStore.getBaseSettingPersonData(params);
  }

  //保存设置
  savePersonBaseSetting() {
    let { goalBaseStore, treeId, selectType } = this.props;
    let { hrmIds } = this.state;
    if(isEmpty(hrmIds)){
      message.error("人员不能为空");
      return;
    }
    let params = {
      orgId: treeId,
      type: selectType,
      hrmIds: hrmIds
    };
    goalBaseStore.saveBaseSettingPersonData(params);
    //清空浏览按钮的数据
    this.setState({
      browserData:[{id:'',name:''}],
      hrmIds:''
    })

  }
  //得到选择数据
  onSelectChange = (selectedKeys, selectedRows) => {
    let len = selectedKeys.length;
    let keys = "";
    for (let i = 0; i < len; i++) {
      if (selectedKeys[i] != "undefined") {
        keys += selectedKeys[i] + ",";
      }
    }
    keys = keys.substring(0, keys.length - 1);
    this.setState({
      ids:keys,
      tableSelectedRowKeys:selectedKeys
    })
    if(len > 0){
      this.props.onCallBack(true);
    }else{
      this.props.onCallBack(false);
    }
  };

  //批量删除
  onDeletePersonBaseSetting() {
    let { goalBaseStore, treeId, selectType } = this.props;
    let keys = this.state.ids;
    if(isEmpty(keys)){
      message.error("删除勾选不能为空");
      return;
    }

    let params = {
      orgId: treeId,
      type: selectType,
      ids: keys,
      doback:()=>{
        this.setState({
          ids:'',
        })
        this.props.onCallBack(false);
      }
    };
    Modal.confirm({
          title: '系统提示',
          content: '确定删除吗?',
          onOk: () => {
             goalBaseStore.deletePersonBaseSetting(params);
          },
        }); 
  }

  //右键菜单删除
  onOperatesClick(record, index, operate, flag) {
    let { goalBaseStore,treeId,selectType } = this.props;
    let params = {
      orgId: treeId,
      type: selectType,
      ids: record.id
    };
    Modal.confirm({
          title: '系统提示',
          content: '确定删除吗?',
          onOk: () => {
             goalBaseStore.deletePersonBaseSetting(params);
          },
        });
  }

  showColumn = () => {
    const {goalBaseStore: { tableStore }} = this.props;
    tableStore.setColSetVisible(true);
    tableStore.tableColSet(true);
  }
}
